<template>
  <div class="app">
    <van-notice-bar left-icon=" volume-o" color="#1989fa" background="#f5f5f5" text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。" />
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" style="width: 100%;">
      <van-cell v-for="item in list" :key="item">
        <div style="margin-top: 5px;">
          <img class="logo" src="@/assets/icons/location.svg" alt="" />
          <span style="color: #4a90e2;">起点：{{ item.startAddress }}</span>
        </div>

        <div style="margin-top: 5px;">
          <img class="logo" src="@/assets/icons/zd.svg" alt="" />
          <span style="color: #d08302;">终点：{{ item.endAddress }}</span>
        </div>
        <div style="margin-left:50%;width: 100%;">
          <van-button type="info" icon="closed-eye" size="small" style="margin-left: auto;"
            @click="showInfo(item)">查看详情</van-button>
          <van-button type="danger" style="left: 5px;margin-left: auto;" icon="close" size="small"
            @click="deleteOrder(item)">删除订单</van-button>
        </div>
      </van-cell>
    </van-list>
    <van-popup v-model="show" round position="bottom" closeable close-icon="close" :style="{ height: '50%' }">
      <span style="display: flex;justify-content: center;font-size: 30px;color: #f81cb5;">订单详情</span>
      <div style="margin-top: 10px;">
        <div style="display: flex;margin-left: 10px;justify-content: center;margin-top: 15px;align-content: center;">

          <span style="font-size: 20px;color: #50e3c2;"><img class="logo" src="@/assets/icons/money.svg"
              alt="" />订单金额:{{ item.price }}</span>
        </div>
        <div style="display: flex;margin-left: 10px;justify-content: center;margin-top: 15px;">
          <span style="font-size: 20px;color: #f8e71c;"><img class="logo" src="@/assets/icons/car.svg" alt="" />订单全程:{{
            item.orderDes }}</span>
        </div>
        <div style="display: flex;margin-left: 10px;justify-content: center;margin-top: 15px;">
          <span style="font-size: 20px;color: #f81cb5;"><img class="logo" src="@/assets/icons/user.svg" alt="" />订单人数:{{
            item.personNumber }}</span>
        </div>
        <div style="display: flex;margin-left: 10px;justify-content: center;margin-top: 15px;">
          <span style="font-size: 20px;color:#4a90e2;"><img class="logo" src="@/assets/icons/location.svg"
              alt="" />接客距离:{{ item.startDes }}</span>
        </div>
        <div style="display: flex;margin-left: 10px;justify-content: center;margin-top: 15px;">
          <span style="font-size: 20px;color:#1c85f8;"><img class="logo" src="@/assets/icons/shoop.svg" alt="" />抢单状态:{{
            item.orderStatus }}</span>
        </div>
      </div>
    </van-popup>
    <van-tabbar v-model="active">
      <van-tabbar-item replace to="/home" name="home" icon="wap-home">抢单首页</van-tabbar-item>
      <van-tabbar-item replace to="/order?account=" name="search" icon="cash-back-record">订单记录</van-tabbar-item>
      <van-tabbar-item replace to="/my" name="setting" icon="user">个人中心</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { request } from "../network/requst";
import { Dialog } from "vant";

export default {
  data() {
    return {
      // 底部菜单切换
      active: 1,
      list: [],
      loading: false,
      finished: false,
      // 弹出框
      show: false,
      item: {
        price: "",
        orderDes: "",
        personNumber: "",
        orderStatus: "",
        startDes: "",
      },
    };
  },
  methods: {
    // 删除订单
    deleteOrder(data) {
      request({
        url: "/order/deleteOrder",
        params: { orderId: data.id },
      }).then((res) => {
        Dialog.alert({
          title: "消息提示",
          message: res.data.message,
          theme: "round-button",
        });
       this.onLoad();
      });
    },
    onLoad() {
      request({
        url: "/order/getMyOrderList",
        params: {},
      }).then((res) => {
        this.list = [];
        setTimeout(() => {
          for (let i = 0; i < res.data.data.length; i++) {
            this.list.push(res.data.data[i]);
          }

          // 加载状态结束
          this.loading = false;

          // 数据全部加载完成
          if (res.data.data.length >= res.data.data.length) {
            this.finished = true;
          }
        }, 500);
      });
    },
    showInfo(item) {
      this.show = true;
      this.item.price = item.price + "元";
      this.item.orderDes = item.orderDes.replace("订单里程", "");
      this.item.personNumber = item.personNumber;
      this.item.orderStatus = item.orderStatus;
      this.item.startDes = item.startDes;
    }
  },
};
</script>


<style scoped>
.logo {
  width: 30px;
  margin: 0 auto;
}
</style>